<template>
  <a-modal
    :title="'查看详情'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card class="right">
        <a-row class="line">
          <a-col span="6">
            图文标题
          </a-col>
          <a-col span="18">
            <p>{{dataSource.title}}</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            图片素材id
          </a-col>
          <a-col span="18">
            <p>{{dataSource.thumbMediaId}}</p>
          </a-col>
        </a-row>

        <a-row class="line">
          <a-col span="6">
            作者
          </a-col>
          <a-col span="18">
            <p>{{dataSource.author}}</p>
          </a-col>
        </a-row>

        <a-row class="line">
          <a-col span="6">
            创建时间
          </a-col>
          <a-col span="18">
            <p>{{dataSource.createTime}}</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            更新时间
          </a-col>
          <a-col span="18">
            <p>{{dataSource.updateTime}}</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            图文类型
          </a-col>
          <a-col
            span="18"
            v-for="item in typeList"
            :key="item.id"
          >
            <p v-if="dataSource.type == item.id">{{item.name}}</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            是否显示封面
          </a-col>
          <a-col span="18">
            <p v-if="dataSource.showCoverPic == 0">不显示</p>
            <p v-else>显示</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            是否打开评论
          </a-col>
          <a-col span="18">
            <p v-if="dataSource.needOpenComment == 0">不打开</p>
            <p v-else>打开</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            是否粉丝才可评论
          </a-col>
          <a-col span="18">
            <p v-if="dataSource.onlyFansCanComment == 0">所有人可评</p>
            <p v-else>粉丝才可评论</p>
          </a-col>
        </a-row>
      </a-card>
      <a-card class="right">
        <a-row class="line">
          <a-col span="6">
            图文消息摘要
          </a-col>
          <a-col span="18">
            <p>{{dataSource.digest}}</p>
            <span class="tip">图文消息的摘要，仅有单图文消息才有摘要，多图文此处为空</span>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            图文内容
          </a-col>
          <a-col span="18">
            <p>{{content}}</p>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            图文链接
          </a-col>
          <a-col span="18">
            <p>{{dataSource.url}}</p>
            <span class="tip">草稿的临时链接/如果图文已发布，则是发布图文时图文消息的URL</span>
          </a-col>
        </a-row>
        <a-row class="line">
          <a-col span="6">
            图文消息原文地址
          </a-col>
          <a-col span="18">
            <p>{{dataSource.contentSourceUrl}}</p>
            <span class="tip">图文消息的原文地址，即点击“阅读原文”后的URL</span>
          </a-col>
        </a-row>
      </a-card>

    </div>

  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
const typeList = [
  {
    id: 0,
    name: '草稿箱'
  },
  {
    id: 1,
    name: '已发布'
  },
  {
    id: 2,
    name: '图文群发'
  }
]
export default {
  props: {
    detail: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-wx',
      typeList,
      dataSource: {},
      id: '',
      content:'',
    }
  },

  created() {
    const { detail } = this.$props
    this.id = detail.id
    this.loadData()
  },

  methods: {
    reset() {
      this.dataSource = {}
      this.$emit('close')
    },
    loadData() {
      const params = {
        id: this.id
      }
      getAction(`${this.urlKey}/wxGraphic/findWxGraphicDetailById`, params).then(data => {
        if (data.code == 200) {
          this.dataSource = data.data
          this.content = this.dataSource.content.replace(/<[^>]*>|/g, '')
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    }
  }
}
</script>
<style scoped>
.main {
  display: flex;
  justify-content: space-between;
}
.left {
  white-space: pre-line;
}
.right {
  width: 50%;
}
.exam {
  color: rgb(150, 151, 153);
  font-size: 20px;
  margin-top: 30px;
  text-align: center;
}
.line {
  margin-bottom: 20px;
  font-size: 15px;
}
.tip {
  color: #969799;
  font-size: 12px;
}
</style>

